import React, { useState } from 'react';
import { 
  Button, 
  Card, 
  Alert, 
  Input, 
  Space, 
  Tag, 
  Progress, 
  Statistic, 
  Row, 
  Col,
  Timeline,
  Badge,
  Avatar,
  notification
} from 'antd';
import { 
  UserOutlined, 
  HeartOutlined, 
  StarOutlined, 
  LikeOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined,
  SyncOutlined
} from '@ant-design/icons';

// 交互式计数器组件
export const InteractiveCounter: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    <Card title="交互式计数器" style={{ margin: '16px 0' }}>
      <Space direction="vertical" style={{ width: '100%' }}>
        <Statistic title="当前计数" value={count} />
        <Space>
          <Button type="primary" onClick={() => setCount(count + 1)}>
            增加
          </Button>
          <Button onClick={() => setCount(count - 1)}>
            减少
          </Button>
          <Button danger onClick={() => setCount(0)}>
            重置
          </Button>
        </Space>
      </Space>
    </Card>
  );
};

// 用户信息卡片组件
export const UserCard: React.FC<{ name: string; role: string; avatar?: string }> = ({ 
  name, 
  role, 
  avatar 
}) => {
  return (
    <Card style={{ margin: '16px 0', maxWidth: 300 }}>
      <Space>
        <Avatar size={64} icon={<UserOutlined />} src={avatar} />
        <div>
          <h3 style={{ margin: 0 }}>{name}</h3>
          <Tag color="blue">{role}</Tag>
        </div>
      </Space>
    </Card>
  );
};

// 进度展示组件
export const ProgressDemo: React.FC = () => {
  const [percent, setPercent] = useState(30);

  const increase = () => {
    setPercent(prev => Math.min(prev + 10, 100));
  };

  const decline = () => {
    setPercent(prev => Math.max(prev - 10, 0));
  };

  return (
    <Card title="进度条演示" style={{ margin: '16px 0' }}>
      <Space direction="vertical" style={{ width: '100%' }}>
        <Progress percent={percent} />
        <Progress percent={percent} status="active" />
        <Progress 
          percent={percent} 
          strokeColor={{
            '0%': '#108ee9',
            '100%': '#87d068',
          }}
        />
        <Space>
          <Button onClick={decline}>-</Button>
          <Button onClick={increase}>+</Button>
        </Space>
      </Space>
    </Card>
  );
};

// 通知演示组件
export const NotificationDemo: React.FC = () => {
  const openNotification = (type: 'success' | 'info' | 'warning' | 'error') => {
    notification[type]({
      message: '通知标题',
      description: `这是一个${type}类型的通知消息，用于演示Antd的通知功能。`,
      duration: 3,
    });
  };

  return (
    <Card title="通知演示" style={{ margin: '16px 0' }}>
      <Space>
        <Button type="primary" onClick={() => openNotification('success')}>
          成功通知
        </Button>
        <Button onClick={() => openNotification('info')}>
          信息通知
        </Button>
        <Button onClick={() => openNotification('warning')}>
          警告通知
        </Button>
        <Button danger onClick={() => openNotification('error')}>
          错误通知
        </Button>
      </Space>
    </Card>
  );
};

// 时间线组件
export const TimelineDemo: React.FC = () => {
  const timelineItems = [
    {
      dot: <CheckCircleOutlined style={{ color: '#52c41a' }} />,
      children: (
        <>
          <p>项目初始化</p>
          <p style={{ color: '#999' }}>2024-01-01</p>
        </>
      ),
    },
    {
      dot: <CheckCircleOutlined style={{ color: '#52c41a' }} />,
      children: (
        <>
          <p>完成基础功能开发</p>
          <p style={{ color: '#999' }}>2024-01-15</p>
        </>
      ),
    },
    {
      dot: <SyncOutlined spin style={{ color: '#1890ff' }} />,
      children: (
        <>
          <p>正在进行测试</p>
          <p style={{ color: '#999' }}>2024-01-20</p>
        </>
      ),
    },
    {
      dot: <ClockCircleOutlined style={{ color: '#999' }} />,
      children: (
        <>
          <p>准备发布</p>
          <p style={{ color: '#999' }}>2024-01-25</p>
        </>
      ),
    },
  ];

  return (
    <Card title="项目时间线" style={{ margin: '16px 0' }}>
      <Timeline items={timelineItems} />
    </Card>
  );
};

// 统计数据组件
export const StatisticsDemo: React.FC = () => {
  return (
    <Card title="数据统计" style={{ margin: '16px 0' }}>
      <Row gutter={16}>
        <Col span={6}>
          <Statistic
            title="用户数"
            value={1128}
            prefix={<UserOutlined />}
          />
        </Col>
        <Col span={6}>
          <Statistic
            title="点赞数"
            value={93}
            suffix="/ 100"
            prefix={<LikeOutlined />}
          />
        </Col>
        <Col span={6}>
          <Statistic 
            title="收藏数" 
            value={9.3} 
            precision={2} 
            prefix={<HeartOutlined />}
            suffix="k"
          />
        </Col>
        <Col span={6}>
          <Statistic
            title="评分"
            value={4.8}
            precision={1}
            prefix={<StarOutlined />}
            suffix="/ 5.0"
          />
        </Col>
      </Row>
    </Card>
  );
};

// 输入演示组件
export const InputDemo: React.FC = () => {
  const [inputValue, setInputValue] = useState('');

  return (
    <Card title="输入演示" style={{ margin: '16px 0' }}>
      <Space direction="vertical" style={{ width: '100%' }}>
        <Input
          placeholder="请输入内容"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        {inputValue && (
          <Alert
            message="输入内容"
            description={`你输入的内容是: ${inputValue}`}
            type="info"
            showIcon
          />
        )}
      </Space>
    </Card>
  );
};

// 徽章演示组件
export const BadgeDemo: React.FC = () => {
  return (
    <Card title="徽章演示" style={{ margin: '16px 0' }}>
      <Space size="large">
        <Badge count={5}>
          <Avatar shape="square" size="large" />
        </Badge>
        <Badge count={0} showZero>
          <Avatar shape="square" size="large" />
        </Badge>
        <Badge count={<ClockCircleOutlined style={{ color: '#f5222d' }} />}>
          <Avatar shape="square" size="large" />
        </Badge>
        <Badge dot>
          <Avatar shape="square" size="large" />
        </Badge>
      </Space>
    </Card>
  );
};